<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <div class="container-wrapper">
        <h1>Good morning!Good night!</h1>
        <p id="subtitle">Click on the sun or moon</p>
        <div class="container">
            <div class="circle-container">

                <!--天空-->
                <div class="sky">
                    <!--晚上部分-->
                    <div class="sky-night">
                        <div class="stars">
                            <div class="shooting-star"></div>
                            <div class="star-group-1"></div>
                            <div class="star-group-2"></div>
                            <div class="star-group-3"></div>
                            <div class="star-group-4"></div>
                        </div>
                    </div>

                    <!--云彩-->
                    <div class="cloud cloud-1"></div>
                    <div class="cloud cloud-2"></div>
                    <div class="cloud cloud-3"></div>
                    <div class="cloud cloud-4"></div>
                    <div class="cloud cloud-5"></div>
                    <div class="cloud cloud-6"></div>

                    <!--飞鸟-->
                    <div class="bird bird-1"></div>
                    <div class="bird bird-2"></div>
                    <div class="bird bird-3"></div>
                </div>

                <!--山川-->
                <div class="mountains">
                    <div class="mountain-back">
                        <div class="mountain-back-1"></div>
                        <div class="mountain-back-2"></div>
                    </div>
                    <div class="mountain-middle">
                        <div class="mountain-middle-1"></div>
                        <div class="mountain-middle-2"></div>
                    </div>
                    <div class="mountain-top">
                        <div class="mountain-top-1"></div>
                    </div>
                </div>

                <!--太阳-->
                <div class="sun-container">
                    <div class="sun"></div>
                </div>

                <!--海洋-->
                <div class="ocean">
                    <div class="boat"></div>
                    <div class="ocean-night">
                        <div class="moon"></div>

                        <div class="mountains mountains-bottom">
                            <div class="mountains-back">
                                <div class="mountain-back-1"></div>
                                <div class="mountain-back-2"></div>
                            </div>
                            <div class="mountain-middle">
                                <div class="mountain-middle-1"></div>
                                <div class="mountain-middle-2"></div>
                            </div>
                            <div class="mountain-top">
                                <div class="mountain-top-1"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <p>灵感来源 Nanou | <a href="https://dribbble.com/Nanuo" target="_blank">Dribbble</a>, <a
                href="https://www.behance.net/Nanuo" target="_blank">Behance</a>, <a
                href="https://www.instagram.com/nanuonanuo/" target="_blank">Instagram</a> <br><br>动画设计 <a
                href="https://lavender-z.github.io/" target="_blank">橘子</a></p>
    </div>
</body>

</html>